<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <com :count="10" age="18" name="张三"></com>
    </div>
</body>
<template id="com">
    <div>
        <h1> {{count + 1}} --- 我叫 {{ name }} 我今年 {{ age }} 岁了，我是一个 {{sex}} 孩子 </h1>
    </div>
</template>
<script>

    // 属性验证，就是父组件在给子组件传值的时候。在子组件中可以对传递的数据类型进行
    // 验证，可以验证数据类型是否符合条件，可以设置多类型，设置必填，设置默认值

    const com = {
        template: '#com',
        props: {
            count: Number,
            // 设置多类型
            age: [String, Number],
            name: {
                // 设置为必传属性
                required: true,
                type: String
            },
            sex: {
                // 设置多类型
                type: [String, Number, Boolean],
                // 默认值你传了我就用你传的数据，不传就用默认数据
                default: '女'
            },
            obj: Object,
            arr: Array,
            fn: Function
        },
        data() { return {} }
    }



    const app = {
        data() {
            return {}
        },
        methods: {},
        components: {
            com
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>